import React, { useEffect, useState } from 'react';
import DescriptionsCondition from '@/components/DescriptionsCondition';
import DrawerCondition from '@/components/DrawerCondition';
import PopImgShow from '@/components/PopImgShow';
import { ShowTime } from '@/common/contact';
import { Timeline, Row, Col, Space, Collapse, Typography } from 'antd';
const { Panel } = Collapse;
const { Title, Text } = Typography;
const Details = (props) => {

    const { detail = {}, } = props;
    const [data, setData] = useState({})
    useEffect(() => {

        if (detail.expressRecord) {
            const { expressRecord = '{}' } = detail

            setData(JSON.parse(expressRecord))
        }


    }, [detail])
    const { list = [], expName, number, logo, courierPhone } = data
    if (Object.keys(data).length > 0) {
        return (
            <Row gutter={[24, 24]}>
                <Col>
                    <Title level={4}>物流信息</Title>
                </Col>
                <Col span={24}>
                    <Space>
                        <PopImgShow url={logo}></PopImgShow>
                        <div>
                            <div>{expName}</div>
                            <div>{number}</div>
                        </div>
                        <div style={{ marginLeft: '12px' }}>联系电话：{courierPhone}</div>
                    </Space>
                </Col>
                <Col span={24}>
                    <Timeline>
                        {list.map((val, index) => {
                            const { status, time } = val
                            console.log(val, '123123123')
                            return <Timeline.Item key={index}>
                                <div>
                                    {status}
                                </div>
                                <div>
                                    {time}
                                </div>
                            </Timeline.Item>
                        })}

                    </Timeline>
                </Col>
            </Row>

        );
    } return null

};
export default Details;
